<!-- 新增/编辑耗材资料弹框 -->
<template>
  <el-dialog :title="title" :loading="loading" v-model="visible" width="50%" append-to-body :before-close="cancel">
    <el-form class="form-column2" ref="formRef" :model="form" :rules="rules" label-width="100px">
      <template v-if="type === 'edit'">
        <el-form-item label="耗材编号" prop="goods_id">
          <el-input v-model="form.goods_id" disabled />
        </el-form-item>
        <el-form-item
          label="启用状态"
          prop="status"
          :rules="[{ required: true, message: '请选择启用状态', trigger: 'change' }]"
        >
          <el-radio-group v-model="form.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <el-form-item label="耗材名称" prop="goods_name">
        <el-input v-model="form.goods_name" placeholder="请输入耗材名称" />
      </el-form-item>
      <el-form-item label="耗材规格" prop="goods_spec">
        <el-input v-model="form.goods_spec" placeholder="请输入耗材规格" />
      </el-form-item>
      <el-form-item label="单位" prop="units">
        <el-input v-model="form.units" placeholder="请输入单位" />
      </el-form-item>
      <el-form-item label="单价" prop="unit_price">
        <el-input v-model="form.unit_price" placeholder="请输入单价" />
      </el-form-item>
      <el-form-item label="供应商" prop="supplier">
        <el-input v-model="form.supplier" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="产地" prop="area">
        <el-input v-model="form.area" placeholder="请输入产地" />
      </el-form-item>
      <el-form-item label="中标编码" prop="goods_code">
        <el-input v-model="form.goods_code" placeholder="请输入中标编码" />
      </el-form-item>
      <el-form-item label="注册证书" prop="cert_number">
        <el-input v-model="form.cert_number" placeholder="请输入注册证书" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="GoodsDialog">
import { toRaw } from "vue";
import { addGoods, editGoods } from "@/api/goods";
const { proxy } = getCurrentInstance();
const props = defineProps({
  rowInfo: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["success"]);
const type = ref("");
const title = ref("");
const visible = defineModel(false);
const loading = ref(false);
const form = reactive({
  goods_id: -1,
  status: undefined,
  goods_name: "",
  goods_spec: "",
  units: "",
  unit_price: "",
  supplier: "",
  area: "",
  goods_code: "",
  cert_number: ""
});
const rules = reactive({
  goods_name: [{ required: true, message: "请输入耗材名称", trigger: "blur" }],
  goods_spec: [{ required: true, message: "请输入耗材规格", trigger: "blur" }],
  units: [{ required: true, message: "请输入单位", trigger: "blur" }],
  unit_price: [{ required: true, message: "请输入单价", trigger: "blur" }],
  supplier: [{ required: true, message: "请输入供应商", trigger: "blur" }]
});

watch(
  () => props.rowInfo,
  () => {
    const obj = toRaw(props.rowInfo) || {};
    if (obj.goods_id) {
      setGoodsInfo(obj);
      type.value = "edit";
      title.value = "修改耗材基础资料";
    } else {
      type.value = "add";
      title.value = "新增耗材基础资料";
    }
  },
  { immediate: true }
);

function setGoodsInfo(data) {
  Object.keys(form).forEach((key) => {
    form[key] = data[key] === 0 ? 0 : data[key] || "";
  });
}
function cancel() {
  clearForm();
  visible.value = false;
}
async function submitForm() {
  const reqObj = {
    add: { api: addGoods, msg: "新增成功" },
    edit: { api: editGoods, msg: "修改成功" }
  };
  const nowReq = reqObj[type.value];
  console.log(nowReq);

  proxy.$refs["formRef"].validate(async (valid) => {
    if (!valid) return;
    const { goods_id, status, goods_name, goods_spec, units, unit_price, supplier, area, goods_code, cert_number } =
      form;
    const params = { goods_name, goods_spec, units, unit_price, supplier, area, goods_code, cert_number };

    if (type.value === "edit") {
      params.goods_id = goods_id;
      params.status = status;
    }
    const res = await nowReq.api(params);
    if (res.code === 0) {
      proxy.$modal.msgSuccess(nowReq.msg);
      emits("success", type);
      cancel();
      return;
    }
    proxy.$modal.msgError(res.message);
  });
}
function clearForm() {
  proxy.$refs["formRef"].resetFields();
  Object.keys(form).forEach((key) => {
    form[key] = "";
  });
  form.id = -1;

  nextTick(() => {
    proxy.$refs["formRef"].clearValidate();
  });
}
</script>
